<template>
  <div>
      <ul class="infinite-list">
      <li v-for="video in arr" :key="video.cate_id">
        <router-link 
         :to="{
        path: '/video',
        query: { id: video.cate_id},
        }"
        >
        <img :src="video.game_src" alt="">
        <p>{{video.game_name}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['video'],
  data() {
    return {
      arr:[],
      count:0,
    }
  },
  created() {
     let url = "/abc/api/RoomApi/game";
     this.$http.get(url).then((res) => {
      this.arr = res.data.data.slice(0, 99);
      console.log(this.arr);
    });
  },
}
</script>
<style>
  .infinite-list{
    height: 1000px;
    list-style: none;
    display: flex;
    justify-content: space-between;
     flex-wrap: wrap;
  }
  .infinite-list li{
    width: 250px;
    height: 270px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid teal;
  }
  .infinite-list li img{
    width: 250px;
    height: 230px;
  }
  p{
    margin: 0;
    text-decoration: none;
    color: #333;
  }
</style>
